<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions" xmlns:c="http://java.sun.com/jsp/jstl/core">

	<p:dialog id="thanhToanDialogId" header="Thanh toán" widgetVar="thanhToanDialog" showEffect="fade" hideEffect="fade"
		resizable="false" modal="true" appendToBody="true" onShow="initThanhToanFields()">
		<h:form id="thanhToanFormId">
			<p:panelGrid id="thanhToanPanelGridId" columns="2" cellpadding="4">
				<f:facet name="header">
					<p:messages />
				</f:facet>
				<p:outputLabel value="Tiền thanh toán:" style="font-weight:bold" />
				<p:outputLabel styleClass="selectTongGiaThanhToan" value="#{banHang.donHang.tongGiaThanhToan}" />

				<p:outputLabel value="Tiền khách đưa *:" style="font-weight:bold" />
				<p:inputText styleClass="selectTienKhachDua" onkeyup="onChangeTienKhachDua(this)" type="number" maxlength="10"
					validator="#{danhSachBanKhuVuc.validateTienKhachDua}">
				</p:inputText>

				<p:outputLabel value="Tiền trả lại" style="font-weight:bold" />
				<p:inputText styleClass="selectTienTraLai" readonly="true">
				</p:inputText>

				<f:facet name="footer">
					<p:commandButton icon="ui-icon-printer" value="Thanh toán" action="#{danhSachBanKhuVuc.thanhToan}" update="@form"
						oncomplete="if (!args.validationFailed) {thanhToanDialog.hide(); dialogCallback();}" />
					<p:commandButton icon="ui-icon-cancel" value="Trở lại" immediate="true" onclick="thanhToanDialog.hide()" />
				</f:facet>
			</p:panelGrid>
		</h:form>
		<script>
			function onChangeTienKhachDua(tienKhachDua) {
				// Remove all separate character in tienKachDua
				var tkd = $(tienKhachDua).val().replace(/\,/g, '').replace(/\./g, '');
				$(".selectTienTraLai").val(tkd - $(".selectTongGiaThanhToan").html());

			}

			function initThanhToanFields() {
				$(".selectTienKhachDua").val($(".selectTongGiaThanhToan").html());
				$(".selectTienTraLai").val(0);
			}
		</script>
	</p:dialog>
</ui:composition>